/**
 * 申请提现组件
 * @type {string}
 */
var htmlCodes = [
    '<div id="rrapp" v-cloak>',
    '    <!--提现订单记录列表-->',
    '    <div v-show="showList">',
    '        <!--查询-->',
    '        <el-form :inline="true" class="demo-form-inline" size="mini">',
    '            <el-form-item label="申请单ID">',
    '                <el-input v-model="query.id"></el-input>',
    '            </el-form-item>',
    '            <el-form-item label="提现单号">',
    '                <el-input v-model="query.payNo"></el-input>',
    '            </el-form-item>',
    '            <el-form-item label="提现状态">',
    '                <el-select v-model="query.applyStatus" placeholder="全部">',
    '                    <el-option',
    '                            v-for="item in applyStatusList"',
    '                            :key="item.id"',
    '                            :label="item.describe"',
    '                            :value="item.id">',
    '                    </el-option>',
    '                </el-select>',
    '            </el-form-item>',
    '            <el-form-item>',
    '                <el-button type="primary" @click="search">查询</el-button>',
    '            </el-form-item>',
    '        </el-form>',
    '        <!--提现订单表格-->',
    '        <el-table size="mini" :data="applyCashData" border style="width: 100%">',
    '            <el-table-column prop="id" label="申请单Id"></el-table-column>',
    '            <el-table-column prop="payNo" label="提现单号"></el-table-column>',
    '            <el-table-column prop="applyPayId" label="支付单号"></el-table-column>',
    '            <el-table-column prop="merchantName" label="商户" width="260"></el-table-column>',
    '            <el-table-column prop="applyStatusText" label="申请状态"></el-table-column>',
    '            <el-table-column prop="applyMoney" label="申请提现金额"></el-table-column>',
    '            <el-table-column prop="applyFee" label="申请提现汇费"></el-table-column>',
    '            <el-table-column prop="expectDate" label="预计到账日期"></el-table-column>',
    '            <el-table-column prop="actualTime" label="实际到账时间"></el-table-column>',
    '            <el-table-column prop="applyTime" label="申请时间"></el-table-column>',
    '            <el-table-column prop="auditTime" label="审核时间"></el-table-column>',
    '            <el-table-column prop="payed" label="已支付金额"></el-table-column>',
    '            <el-table-column',
    '                    fixed="right"',
    '                    label="操作"',
    '                    width="100">',
    '                <template slot-scope="scope">',
    '                    <el-button @click="lookDetail(scope.row.id)" type="text" size="small">查看</el-button>',
    '                </template>',
    '            </el-table-column>',
    '        </el-table>',
    '        <!--分页插件-->',
    '        <div style="text-align: center;margin: 15px">',
    '            <el-pagination',
    '                    @size-change="handleSizeChange"',
    '                    @current-change="handleCurrentChange"',
    '                    :current-page="page.currentPage"',
    '                    :page-sizes="page.pageSizes"',
    '                    :page-size="page.pageSize"',
    '                    layout="total, sizes, prev, pager, next"',
    '                    :total="page.total">',
    '            </el-pagination>',
    '        </div>',
    '    </div>',
    '    <!--提现订单记录明细-->',
    '    <div v-show="!showList" class="panel panel-default">',
    '        <div class="panel-heading">操作</div>',
    '        <div style="padding: 10px;padding-left: 20px; text-align:center">',
    '            <button type="button" style="margin-left: 30px;width: 100px"  @click="goBack" class="btn  btn-default btn-sm"><i class="fa fa-arrow-left"></i>&nbsp;返回</button>',
    '        </div>',
    '        <!--提现主表详情-->',
    '        <div class="panel-heading">申请单信息</div>',
    '        <div style="padding: 20px;">',
    '            <el-form ref="form" :model="detail.applyCash" label-width="100px" size="mini">',
    '                <el-row type="flex" class="row-bg" justify="space-between">',
    '                    <el-col :span="6">',
    '                        <el-form-item label="单据编号">',
    '                            <el-input v-model="detail.applyCash.id" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="支付单号">',
    '                            <el-input v-model="detail.applyCash.applyPayId" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="商家">',
    '                            <el-input v-model="detail.applyCash.merchantName" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                </el-row>',
    '                <el-row type="flex" class="row-bg" justify="space-between">',
    '                    <el-col :span="6">',
    '                        <el-form-item label="申请状态">',
    '                            <el-input v-model="detail.applyCash.applyStatusText" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="申请金额">',
    '                            <el-input v-model="detail.applyCash.applyMoney" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="提现汇费">',
    '                            <el-input v-model="detail.applyCash.applyFee" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                </el-row>',
    '                <el-row type="flex" class="row-bg" justify="space-between">',
    '                    <el-col :span="6">',
    '                        <el-form-item label="预计到账日期">',
    '                            <el-input v-model="detail.applyCash.expectDate" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="实际到账时间">',
    '                            <el-input v-model="detail.applyCash.actualTime" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                    <el-col :span="6">',
    '                        <el-form-item label="申请时间">',
    '                            <el-input v-model="detail.applyCash.applyTime" :disabled="true"></el-input>',
    '                        </el-form-item>',
    '                    </el-col>',
    '                </el-row>',
    '            </el-form>',
    '        </div>',
    '        <!--提现明细-->',
    '        <div class="panel-heading">申请单明细</div>',
    '        <el-table size="mini" :data="detail.applyCashItems" border style="width: 100%">',
    '            <el-table-column prop="orderAccountId" label="分配订单id"></el-table-column>',
    '            <el-table-column prop="orderId" label="订单id"></el-table-column>',
    '            <el-table-column prop="orderStatus" label="订单状态"></el-table-column>',
    '            <el-table-column  label="是否分配">',
    '                <template slot-scope="scope">',
    '                    {{scope.row.isAllot === 1?\'是\': \'不是\'}}',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="orderCreateTime" label="下单时间"></el-table-column>',
    '            <el-table-column prop="totalAmount" label="商品总额"></el-table-column>',
    '            <el-table-column prop="costFreight" label="配送费用"></el-table-column>',
    '            <el-table-column prop="discount" label="调价"></el-table-column>',
    '            <el-table-column prop="pmtGoods" label="商品促销优惠"></el-table-column>',
    '            <el-table-column prop="pmtOrder" label="优惠券促销"></el-table-column>',
    '            <el-table-column prop="pmtRandom" label="随机立减"></el-table-column>',
    '            <el-table-column prop="payableAmount" label="应付金额"></el-table-column>',
    '            <el-table-column prop="payed" label="支付金额"></el-table-column>',
    '            <el-table-column prop="paymentTime" label="支付时间"></el-table-column>',
    '            <el-table-column prop="finishTime" label="完成时间"></el-table-column>',
    '            <el-table-column prop="fee" label="现汇费"></el-table-column>',
    '        </el-table>',
    '        <!--提现日志-->',
    '        <div class="panel-heading">提现日志</div>',
    '        <el-table size="mini" :data="detail.applyCashLogs" border style="width: 100%">',
    '            <el-table-column prop="applyPayId" label="支付id"></el-table-column>',
    '            <el-table-column prop="payNo" label="联动提现单号"></el-table-column>',
    '            <el-table-column label="日志状态">',
    '                <template slot-scope="scope">',
    '                    <span v-if="scope.row.applyLogStatus === 0">支付中</span>',
    '                    <span v-if="scope.row.applyLogStatus === 1">支付失败</span>',
    '                    <span v-if="scope.row.applyLogStatus === 2">支付成功</span>',
    '                </template>',
    '            </el-table-column>',
    '            <el-table-column prop="message" label="提现描述"></el-table-column>',
    '            <el-table-column prop="bankNo" label="银行卡号"></el-table-column>',
    '            <el-table-column prop="bankOwner" label="银行卡持有人"></el-table-column>',
    '            <el-table-column prop="bank" label="银行"></el-table-column>',
    '            <el-table-column prop="remark" label="备注"></el-table-column>',
    '            <el-table-column prop="createTime" label="创建时间"></el-table-column>',
    '        </el-table>',
    '    </div>',
    '</div>'
].join("");
Vue.component('zy-apply-cash-log', {
    template: htmlCodes,
    data:function () {
        return{
            query: {id: null, payNo: null, applyStatus: null},
            page: {currentPage: 0, pageSizes: [20, 50, 100], pageSize: 20, total: 0, ascending: [], descending: []},
            title: null,
            showList: true,
            applyCashData: [],//申请提现记录
            applyStatusList: [],
            detail: {
                applyCash: {},
                applyCashItems: [],
                applyCashLogs: [],
            }
        }
    },

    methods:{
        search: function () {
            this.page.currentPage = 1;
            this.queryApplyCashLog();
        },
        // 查询
        queryApplyCashLog: function () {
            //查询参数
            var queryParam = this.query;

            // 分页参数
            queryParam.page = this.page.currentPage;
            queryParam.limit = this.page.pageSize;

            //排序参数
            queryParam.ascending = this.page.ascending;
            queryParam.descending = this.page.descending;

            //ajax 请求
            var self = this;
            $.ajax({
                type: "POST",
                url: baseURL + "capital/merchantapplycash/applyCashLog",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify(queryParam),
                success: function (r) {
                    if (r.code == 0) {
                        self.page.total = r.page.totalCount;
                        self.applyCashData = r.page.list;
                        self.applyStatusList = r.userData.applyStatusEnum;
                    } else {
                        alert(r.msg);
                    }
                }
            });


        },

        searchApplyCashLog : function () {
            this.page.currentPage = 1;
            this.queryApplyCashLog();
        },

        // 页数变化
        handleSizeChange: function (val) {
            this.page.pageSize = val;
            this.queryApplyCashLog();
        },
        //当前页变化
        handleCurrentChange: function (val) {
            this.page.currentPage = val;
            this.queryApplyCashLog();
        },

        // 页数变化
        handleSizeChange: function (val) {
            this.page.pageSize = val;
            this.queryApplyCashLog();
        },

        sortChange: function (column) {
            if (column.order === 'ascending') {
                if (this.page.ascending.indexOf(column.column.index) == -1) {
                    this.page.ascending.push(column.column.index);
                }
                if (this.page.descending.indexOf(column.column.index) > -1) {
                    this.page.descending.splice(this.page.descending.indexOf(column.column.index), 1);
                }
            }
            if (column.order === 'descending') {
                if (this.page.descending.indexOf(column.column.index) == -1) {
                    this.page.descending.push(column.column.index);
                }
                if (this.page.ascending.indexOf(column.column.index) > -1) {
                    this.page.ascending.splice(this.page.ascending.indexOf(column.column.index), 1);

                }
            }

            if (column.order === null) {
                if (this.page.descending.indexOf(column.column.index) > -1) {
                    this.page.descending.splice(this.page.descending.indexOf(column.column.index), 1);
                }
                if (this.page.ascending.indexOf(column.column.index) > -1) {
                    this.page.ascending.splice(this.page.ascending.indexOf(column.column.index), 1);
                }

            }

            this.queryApplyCashLog();
        },

        //查看明细
        lookDetail: function (id) {
            this.showList = false;
            // 异步加载 明细相关数据
            var self = this;
            $.get(baseURL + "capital/merchantapplycash/info/" + id, function (r) {
                if(r.code == 0){
                    self.detail.applyCash = r.merchantApplyCash;
                    self.detail.applyCashItems = r.merchantApplyCashItems;
                    self.detail.applyCashLogs = r.merchantApplyLog;
                }else {
                    alert(r.msg);
                }

            });

        },

        goBack: function () {
            this.showList = true;
            this.queryApplyCashLog();
        }
    }
});